<div [ngClass]="{'dark-theme': isDarkTheme | async}" class="mat-dialog-inner-container mat-app-background settings_container">

  <h2 mat-dialog-title>Settings</h2>
  <mat-card-subtitle>Manage local and qBittorrent preferences. Clicking save will reload the page!</mat-card-subtitle>

  <mat-dialog-content class="mat-typography dialog_content">
    <div class="content_container">
      <div class="settings_categories" mode="side" opened>
        <mat-nav-list [disableRipple]="true" role="list">

          <mat-list-item class="{{getClassForTab('web_ui')}}" (click)="onTabSelect('web_ui')">
            <mat-icon color="{{tab_selected === 'web_ui' ? 'primary' : ''}}" mat-list-icon>public</mat-icon>
            <div mat-line>Web UI</div>
            <div mat-line>Options for this UI</div>
          </mat-list-item>

          <mat-list-item class="{{getClassForTab('downloads')}}" (click)="onTabSelect('downloads')">
            <mat-icon color="{{tab_selected === 'downloads' ? 'primary' : ''}}" mat-list-icon>get_app</mat-icon>
            <div mat-line>Downloads</div>
            <div mat-line>Save path, queueing</div>
          </mat-list-item>

          <mat-list-item class="{{getClassForTab('speed')}}" (click)="onTabSelect('speed')">
            <mat-icon color="{{tab_selected === 'speed' ? 'primary' : ''}}" mat-list-icon>speed</mat-icon>
            <div mat-line>Speed</div>
            <div mat-line>Global/Alt speed options</div>
          </mat-list-item>

          <mat-list-item class="{{getClassForTab('rss')}}" (click)="onTabSelect('rss')">
            <mat-icon color="{{tab_selected === 'rss' ? 'primary' : ''}}" mat-list-icon>rss_feed</mat-icon>
            <div mat-line>RSS</div>
          </mat-list-item>

          <mat-list-item class="{{getClassForTab('about')}}" (click)="onTabSelect('about')">
            <mat-icon color="{{tab_selected === 'about' ? 'primary' : ''}}" mat-list-icon>info</mat-icon>
            <div mat-line>About</div>
          </mat-list-item>
        </mat-nav-list>
      </div>

      <div class="rightNavigation">
        <app-web-ui-settings    class="{{tab_selected !== 'web_ui'    ? 'hidden': ''}}"></app-web-ui-settings>
        <app-download-settings  class="{{tab_selected !== 'downloads' ? 'hidden': ''}}"></app-download-settings>
        <app-speed-settings     class="{{tab_selected !== 'speed'     ? 'hidden': ''}}"></app-speed-settings>
        <app-rss-settings       class="{{tab_selected !== 'rss'       ? 'hidden': ''}}"></app-rss-settings>
        <app-about-settings     class="{{tab_selected !== 'about'     ? 'hidden': ''}}"></app-about-settings>
      </div>
    </div>
    <mat-divider></mat-divider>
  </mat-dialog-content>

  <mat-dialog-actions align="end">
    <button mat-button [disabled]="loading" [mat-dialog-close]="true">Cancel</button>
    <button mat-raised-button [disabled]="loading" color="primary" (click)="onSave()" cdkFocusInitial>Save</button>
  </mat-dialog-actions>

</div>
